<!--
 * @Author: lirl
 * @Date: 2022-07-18 10:15:53
 * @Description: 工作台样式查询页面样例
-->
<template>
  <div class="workbench-table">
    <div class="search-module white-module">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="filterPanel">
          <!-- 面板header -->
          <template slot="title">
            <div class="module-title-box">
              <div class="module-title">检索筛选</div>
            </div>
          </template>
          <!-- 面板content -->
          <el-form ref="form" :model="searchParams" label-width="100px" size="small" class="list-filter-module">
            <el-row>
              <el-col :span="16">
                <el-form-item label="标题:">
                  <el-input
                    clearable
                    v-model="searchParams.applyTitle"
                    placeholder="请输入文件标题或会议议题"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="待阅提交人:">
                  <el-input clearable v-model="searchParams.parentHandlerName" placeholder="请输入待阅提交人">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="起草部门:">
                  <el-input
                    clearable
                    v-model="searchParams.sendDocOrgNamePath"
                    placeholder="请输入起草部门名称"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="起草人:">
                  <el-input
                    clearable
                    v-model="searchParams.sendDocUserName"
                    placeholder="请输入起草人姓名"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="list-filter-operate-btns">
                  <el-button type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
                  <el-button icon="el-icon-refresh-left" class="primary-border-btn" @click="resetFields" size="small">
                    重置
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="table-module white-module">
      <div class="module-title-box">
        <div class="module-title">待办列表</div>
      </div>
      <div class="table-content" v-loading="loading" v-if="!isEmpty(tableData)">
        <jdf-table
          :table-attrs="{ ...tableAttrs, border: true, }"
          :columns="columns"
          :data="tableData"
          :pagination-attrs="{ ...paginationAttrs, layout: 'total, prev, pager, next, sizes, jumper' }"
          :pagination-events="paginationEvents"
          :table-events="tableEvents"
        ></jdf-table>
      </div>
      <empty v-else description="暂无数据"></empty>
    </div>
  </div>
</template>

<script>
import { isEmpty } from 'lodash-es';
import { timeConvert } from 'jdf-util';
import { WorkService } from 'jdf-jssdk';
import { bizServiceURL } from '@/api/utils/constants';
import Empty from '@/components/Empty';
import listTableMixins from '@/mixins/listTableMixins';

export default {
  components: {
    Empty
  },
  mixins: [listTableMixins],
  data() {
    return {
      isEmpty,
      // 查询参数
      searchParams: {},
      service: new WorkService(bizServiceURL),
      functionName: 'getTodoList',
      // 检索筛选面板
      activeNames: 'filterPanel',
      columns: [
        {
          prop: 'title',
          label: '标题',
          attrs: {
            'show-overflow-tooltip': true,
            minWidth: 200,
          },
        },
        {
          prop: 'processDefinitionName',
          width: 160,
          label: '文种',
          attrs: {
            'show-overflow-tooltip': true,
          }
        },
        {
          prop: 'nodeName',
          width: 150,
          label: '当前环节',
          attrs: {
            'show-overflow-tooltip': true,
          }
        },
        {
          prop: 'senderName',
          width: 100,
          label: '上一处理人',
          attrs: {
            align: 'center'
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          width: 180,
          attrs: {
            formatter: (row) => timeConvert(row.createTime, 'YYYY-MM-DD HH:mm:ss'),
            align: 'center'
          }
        }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 点击行打开流程表单
     */
    openTaskForm(row) {
    },
  }
};
</script>
<style lang="scss">
@import '@/assets/style/list-workbench.scss';
</style>
